<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title> kagerou - Settings </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,700">
    <link rel="stylesheet" href="../overlay/css/reset.css?v=daze-days" />
    <link rel="stylesheet" href="index.css?v=daze-days" />
    <link rel="stylesheet" href="media.css?v=daze-days" />
    <link rel="stylesheet" href="dialog.css?v=daze-days" />
    <link rel="stylesheet" href="../share/css/job-icons.css?v=daze-days" />
    <script src="lib/sortable-1.10.2-min.js"> </script>
    <script src="../share/lib/util.js?v=daze-days"> </script>
    <script src="../share/lib/locale.js?v=daze-days"> </script>
    <script src="../share/lib/config.js?v=daze-days"> </script>
    <script src="lib/dialog.js?v=daze-days"> </script>
    <script src="lib/ui.js?v=daze-days"> </script>
    <script src="lib/tabconfig.js?v=daze-days"> </script>
    <script src="lib/import-export.js?v=daze-days"> </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"> </script>

    <template id="template-tab">
      <li class="draggable">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
             viewBox="0 0 24 24" class="icon">
          <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
        </svg>
        <label> ... </label>
      </li>
    </template>
    <template id="template-pane">
      <div class="tabconfig-pane">
        <article>
          <p class="control half">
            <label data-render="title.label"
                   data-locale="ui.config.tab.title">
              제목
            </label>
            <input type="text" data-render="title.input"
                   style="width: 3rem;" />
          </p><p class="control half">
            <label data-render="width.label"
                   data-locale="ui.config.tab.width">
              24인 모드
            </label>
            <select data-render="width.input">
              <option data-locale="ui.config.tab.widths.1"
                      value="1"> 끔 </option>
              <option data-locale="ui.config.tab.widths.2"
                      value="2"> 2명씩 </option>
              <option data-locale="ui.config.tab.widths.3"
                      value="3"> 3명씩 </option>
            </select>
          </p>
          <p class="control">
            <label data-render="sort.label"
                   data-locale="ui.config.tab.sortby">
              정렬 기준
            </label>
            <select data-render="sort.input">
              <option> ... </option>
            </select>
          </p>
        </article>
        <div class="tabconfig-list-container">
          <ul class="tabconfig-list">
            <li class="header"
                data-locale="ui.config.tab.available">
              사용할 수 있는 항목
            </li>
            <ul data-control="columns.available">
            </ul>
          </ul>
          <ul class="tabconfig-list">
            <li class="header"
                data-locale="ui.config.tab.configured">
              설정된 항목 (권장: 이름 제외 6개까지)
            </li>
            <ul data-control="columns.used">
            </ul>
          </ul>
        </div>
      </div>
    </template>

    <script>
'use strict'

window.config = new Config()

config.load()
config.setResizeFactor()

window.locale = new Locale(window.config.get('lang'))

document.addEventListener('DOMContentLoaded', _ => {
  window.tabconfig = new Tabconfig()
  window.editor = ace.edit('editor')
  editor.$blockScrolling = Infinity
  editor.setTheme('ace/theme/tomorrow_night_eighties')

  let session = editor.getSession()
  session.setMode('ace/mode/css')
  session.setTabSize(2)
  session.setUseSoftTabs(true)

  editor.setValue(config.get('custom_css') || (CONFIG_DEFAULT.custom_css + '\n'))
  editor.gotoLine(1)

  setTimeout(_ => window.locale.localizeAll(), 500)
})
    </script>
  </head>
  <body>
    <input type="checkbox" class="hidden" id="aside-toggle" />
    <label class="aside-dimmer" for="aside-toggle"> </label>
    <aside onclick="$('#aside-toggle').click()">
      <h1 ondblclick="location.reload()"
          data-locale="ui.config._"> 설정 </h1>
      <ul class="menu">
        <li class="mobile-only">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
               viewBox="0 0 24 24" class="icon">
            <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
          </svg>
          <label data-locale="ui.config._"> 설정 </label>
        </li>
        <li class="mobile-only splitter"> </li>
        <li data-page="general">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
               viewBox="0 0 24 24" class="icon">
            <path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" />
          </svg>
          <label data-locale="ui.config.general._"> 일반 </label>
        </li>
        <li data-page="style">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
               viewBox="0 0 24 24" class="icon">
            <path d="M2.53 19.65l1.34.56v-9.03l-2.43 5.86c-.41 1.02.08 2.19 1.09 2.61zm19.5-3.7L17.07 3.98c-.31-.75-1.04-1.21-1.81-1.23-.26 0-.53.04-.79.15L7.1 5.95c-.75.31-1.21 1.03-1.23 1.8-.01.27.04.54.15.8l4.96 11.97c.31.76 1.05 1.22 1.83 1.23.26 0 .52-.05.77-.15l7.36-3.05c1.02-.42 1.51-1.59 1.09-2.6zM7.88 8.75c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-2 11c0 1.1.9 2 2 2h1.45l-3.45-8.34v6.34z" />
          </svg>
          <label data-locale="ui.config.style._"> 스타일 </label>
        </li>
        <li data-page="color">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
               viewBox="0 0 24 24" class="icon">
            <path d="M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z" />
            <path d="M0 20h24v4H0z" fill-opacity=".36" />
          </svg>
          <label data-locale="ui.config.color._"> 게이지 색상 </label>
        </li>
        <li data-page="width">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
               viewBox="0 0 24 24" class="icon">
            <path d="M23 7V1h-6v2H7V1H1v6h2v10H1v6h6v-2h10v2h6v-6h-2V7h2zM3 3h2v2H3V3zm2 18H3v-2h2v2zm12-2H7v-2H5V7h2V5h10v2h2v10h-2v2zm4 2h-2v-2h2v2zM19 5V3h2v2h-2zm-5.27 9h-3.49l-.73 2H7.89l3.4-9h1.4l3.41 9h-1.63l-.74-2zm-3.04-1.26h2.61L12 8.91l-1.31 3.83z" />
          </svg>
          <label data-locale="ui.config.width._"> 너비 </label>
        </li>
        <li class="splitter"> </li>
        <li data-page="tab">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
               viewBox="0 0 24 24" class="icon">
            <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h10v4h8v10z" />
          </svg>
          <label data-locale="ui.config.tab._"> 탭 </label>
        </li>
        <li data-page="import-export">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
               viewBox="0 0 24 24" class="icon">
            <path d="M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z" />
          </svg>
          <label data-locale="ui.config.i/e._"> 들여오기/내보내기 </label>
        </li>
        <li data-page="etc">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
               viewBox="0 0 24 24" class="icon">
            <path d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z" />
          </svg>
          <label data-locale="ui.config.etc._"> 기타 </label>
        </li>
        <li class="splitter"> </li>
        <li data-page="info">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
               viewBox="0 0 24 24" class="icon">
            <path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z" />
          </svg>
          <label data-locale="ui.config.info._"> 정보 </label>
        </li>
      </ul>
    </aside>
    <header>
      <label for="aside-toggle">
        <svg class="icon" width="1.5em" height="1.5em" viewBox="0 0 24 24">
          <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
        </svg>
      </label>
      <h2 data-locale="ui.config.general._"> 일반 </h2>
      <span class="ws-tab-notice hidden">
        Qt의 버그 때문에 드래그가 잘 안 됩니다.
        <br />
        드래그를 끝낸 후 그 자리를 한 번 클릭해주세요!
      </span>
      <ul class="buttons">
        <li class="button button-primary" id="save"
            data-locale="ui.config.save"> 저장 </li>
      </ul>
    </header>
    <main>
      <section data-page="general" class="active">
        <article>
          <p class="control">
            <label for="input-lang">
              语言
            </label>
            <select id="input-lang"
                    data-config-key="lang">
              <option value="ko"> 한국어 </option>
              <option value="ja"> 日本語 </option>
              <option value="cn"> 中文 </option>
              <option value="en"> English </option>
              <option value="de"> Deutsch </option>
              <option value="fr"> Français </option>
            </select>
          </p>
        </article>
        <article>
          <h3 data-locale="ui.config.general.combine_pet"> 펫 합산 </h3>
          <p class="control">
            <label for="input-format-myname"
                   data-locale="config.format.myname"> 내 이름 </label>
            <input type="text" id="input-format-myname"
                   data-config-key="format.myname"
                   data-splitter=","
                   data-type="array"
                   data-locale="ui.config.general.split-by-comma=placeholder"
                   placeholder="쉼표(,)로 구분합니다."/>
          </p>
        </article>
        <article>
          <h3 data-locale="ui.config.general.basic"> 기본 </h3>
          <p class="control">
            <label for="input-format-use_short_name"
                   data-locale="config.format.use_short_name">
              이름을 이니셜로 표시 (글로벌 서버용)
            </label>
            <select id="input-format-use_short_name"
                    data-type="integer"
                    data-config-key="format.use_short_name">
              <option value="0">First Last</option>
              <option value="1">F. Last</option>
              <option value="2">First L.</option>
              <option value="3">F. L.</option>
            </select>
          </p>
          <p class="control">
            <label for="input-style-resize-factor"
                   data-locale="config.style.resize-factor">
              UI 크기 조절
            </label>
            <span class="input-group">
              <label class="input-value"
                     for="input-style-resize-factor">
                1.0
              </label>
              <input type="range" id="input-style-resize-factor"
                     data-config-key="style.resize-factor"
                     min="0.75" step="0.125" max="2" />
            </span>
          </p>
          <p class="control">
            <label for="input-style-body-font"
                   data-locale="config.style.body-font">
              본문 폰트
            </label>
            <input type="text" id="input-style-body-font"
                   data-config-key="style.body-font"
                   style="flex-grow: 50;"/>
          </p>
          <p class="control">
            <label for="input-format-use_tailing_pct"
                   data-locale="config.format.use_tailing_pct">
              백분율 값 뒤에 % 기호를 표시
            </label>
            <input type="checkbox" id="input-format-use_tailing_pct"
                   data-type="boolean"
                   data-config-key="format.use_tailing_pct" />
          </p>
        </article>
        <article>
          <h3 data-locale="config.format.significant_digit._">
            소수점 정확도
          </h3>
          <p class="control">
            <label for="input-format-significant_digit-dps"
                   data-locale="config.format.significant_digit.dps">
              DPS
            </label>
            <span class="input-group">
              <label class="input-value"
                     for="input-format-significant_digit-dps">
                2
              </label>
              <input type="range" id="input-format-significant_digit-dps"
                     data-config-key="format.significant_digit.dps"
                     min="0" step="1" max="2" />
            </span>
          </p>
          <p class="control">
            <label for="input-format-significant_digit-hps"
                   data-locale="config.format.significant_digit.hps">
              HPS
            </label>
            <span class="input-group">
              <label class="input-value"
                     for="input-format-significant_digit-hps">
                2
              </label>
              <input type="range" id="input-format-significant_digit-hps"
                     data-config-key="format.significant_digit.hps"
                     min="0" step="1" max="2" />
            </span>
          </p>
          <p class="control">
            <label for="input-format-significant_digit-accuracy"
                   data-locale="config.format.significant_digit.accuracy">
              실패율 (미스 수 / 타격 수)
            </label>
            <span class="input-group">
              <label class="input-value"
                     for="input-format-significant_digit-accuracy">
                2
              </label>
              <input type="range" id="input-format-significant_digit-accuracy"
                     data-config-key="format.significant_digit.accuracy"
                     min="0" step="1" max="2" />
            </span>
          </p>
          <p class="control">
            <label for="input-format-significant_digit-critical"
                   data-locale="config.format.significant_digit.critical">
              극대화 비율
            </label>
            <span class="input-group">
              <label class="input-value"
                     for="input-format-significant_digit-critical">
                0
              </label>
              <input type="range" id="input-format-significant_digit-critical"
                     data-config-key="format.significant_digit.critical"
                     min="0" step="1" max="2" value="0" />
            </span>
          </p>
        </article>
        <article>
          <h3 data-locale="ui.config.general.footer._"> 하단 바 항목 </h3>
          <p class="control">
            <label for="input-footer-rank"
                   data-locale="ui.config.general.footer.rank">
              현재 순위
            </label>
            <input type="checkbox" id="input-footer-rank"
                   data-type="boolean"
                   data-config-key="footer.rank" />
          </p>
          <p class="control">
            <label for="input-footer-rdps"
                   data-locale="ui.config.general.footer.rdps">
              RDPS
            </label>
            <input type="checkbox" id="input-footer-rdps"
                   data-type="boolean"
                   data-config-key="footer.rdps" />
          </p>
          <p class="control">
            <label for="input-footer-rhps"
                   data-locale="ui.config.general.footer.rhps">
              RHPS
            </label>
            <input type="checkbox" id="input-footer-rhps"
                   data-type="boolean"
                   data-config-key="footer.rhps" />
          </p>
          <p class="control">
            <label for="input-footer-recover"
                   data-locale="ui.config.general.footer.recover">
              총 받은 힐 / 받은 대미지 🔄
            </label>
            <input type="checkbox" id="input-footer-recover"
                   data-type="boolean"
                   data-config-key="footer.recover" />
          </p>
        </article>
        <article>
          <h3 data-locale="ui.config.general.reset"> Re:제로 </h3>
          <p class="control">
            <label for="button-reset-all"
                   data-locale="ui.config.general.reset-this">
              전부 초기화하기
            </label>
            <button id="button-reset-all"
                    data-reset=""
                    data-locale="ui.config.execute">
              실행
            </button>
          </p>
        </article>
      </section>
      <section data-page="style">
        <article>
          <p class="control">
            <label for="button-reset-style"
                   data-locale="ui.config.style.reset-this">
              스타일 초기화
            </label>
            <button id="button-reset-style"
                    data-reset="style"
                    data-locale="ui.config.execute">
              실행
            </button>
          </p>
          <blockquote data-locale="ui.config.style.css-help.0">
            모두 CSS 값을 사용합니다.
            <br />
            세미콜론을 붙이고 다른 속성을 추가로 사용할 수 있습니다.
          </blockquote>
          <blockquote data-locale="ui.config.style.css-help.1">
            <code>rgba(빨강, 초록, 파랑, 투명도)</code>로 반투명한 색을
            사용합니다. 투명도는 0에서 1입니다.
          </blockquote>
          <blockquote data-locale="ui.config.style.css-help.2">
            <code>url(이미지 주소)</code>로 배경 이미지를 사용합니다.
          </blockquote>
        </article>
        <article>
          <h3 data-locale="ui.config.style.image._"> 배경 이미지 </h3>
          <blockquote data-locale="ui.config.style.image.help">
            배경 이미지가 배경 색보다 우선하며, 이미지 URL은
            <code>url()</code>로 감싸야 합니다.
          </blockquote>
          <p class="control">
            <label for="input-style-content-bg-color"
                   data-locale="ui.config.style.image.color">
              색
            </label>
            <span class="input-group">
              <input type="text" id="input-style-content-bg-color"
                     data-config-key="style.content-bg-color"
                     style="width: 10rem" />
            </span>
          </p>
          <p class="control">
            <label for="input-style-content-bg"
                   data-locale="ui.config.style.image.image">
              이미지
            </label>
            <span class="input-group">
              <input type="text" id="input-style-content-bg"
                     data-config-key="style.content-bg"
                     style="width: 10rem" />
            </span>
          </p>
          <p class="control">
            <label for="input-style-content-bg-opacity"
                   data-locale="ui.config.style.image.opacity">
              이미지 투명도
            </label>
            <span class="input-group">
              <label class="input-value-style" for="input-style-content-bg-opacity"
                     style="background: #111">
              </label>
              <input type="range" id="input-style-content-bg-opacity"
                     data-config-key="style.content-bg-opacity"
                     data-style="opacity"
                     min="0" max="1" step="0.05" />
            </span>
          </p>
          <blockquote>
            <span data-locale="ui.config.style.image.default"> 기본 값: </span>
            blur(0px) brightness(1) contrast(1) grayscale(0) hue-rotate(0deg) invert(0) saturate(1) sepia(0)
          </blockquote>
          <p class="control">
            <label for="input-style-content-bg-filter"
                   data-locale="ui.config.style.image.filter">
              CSS 필터 (고급)
            </label>
            <span class="input-group">
              <input type="text" id="input-style-content-bg-filter"
                     data-config-key="style.content-bg-filter"
                     placeholder="blur(2px) brightness(0.7)"
                     style="width: 12rem" />
            </span>
          </p>
        </article>
        <article>
          <h3 data-locale="ui.config.style.layout"> 레이아웃 </h3>
          <p class="control">
            <label for="input-style-content-align"
                   data-locale="config.style.content-align">
              내용 정렬
            </label>
            <select id="input-style-content-align"
                    data-config-key="style.content-align">
              <option value="left" data-locale="general.left"> 왼쪽 </option>
              <option value="center" data-locale="general.center"> 가운데 </option>
              <option value="right" data-locale="general.right"> 오른쪽 </option>
            </select>
          </p>
          <p class="control">
            <label for="input-style-graph-height"
                   data-locale="config.style.graph-height">
              테이블 줄 높이
            </label>
            <span class="input-group">
              <label class="input-value" for="input-style-graph-height">
              </label>
              <input type="range" id="input-style-graph-height"
                     data-config-key="style.graph-height"
                     data-unit="rem"
                     min="1" step="0.25" max="2.5"/>
            </span>
          </p>
          <p class="control">
            <label for="input-style-gauge-height"
                   data-locale="config.style.gauge-height">
              게이지 높이
            </label>
            <span class="input-group">
              <label class="input-value" for="input-style-gauge-height">
              </label>
              <input type="range" id="input-style-gauge-height"
                     data-config-key="style.gauge-height"
                     data-unit="%"
                     min="0" step="5" max="100"/>
            </span>
          </p>
          <p class="control">
            <label for="input-style-body-margin"
                   data-locale="config.style.body-margin">
              바깥쪽 여백
            </label>
            <span class="input-group">
              <label class="input-value-style" for="input-style-body-margin"
                     style="background: #333; vertical-align: -0.25rem;">
              </label>
              <input type="range" id="input-style-body-margin"
                     data-config-key="style.body-margin"
                     data-style="width"
                     data-unit="rem"
                     min="0" step="0.125" max="0.5" />
            </span>
          </p>
        </article>
        <article>
          <h3 data-locale="ui.config.style.background"> 배경 </h3>
          <p class="control">
            <label for="input-style-nav-bg"
                   data-locale="ui.config.style.element.nav">
              상단 바
            </label>
            <span class="input-group">
              <label class="input-value-style" for="input-style-nav-bg">
              </label>
              <input type="text" id="input-style-nav-bg"
                     data-config-key="style.nav-bg"
                     data-style="background"
                     style="width: 10rem" />
            </span>
          </p>
          <p class="control">
            <label for="input-style-nav-opacity"
                   data-locale="config.style.nav-opacity">
              비활성 시 상단 바 투명도
            </label>
            <span class="input-group">
              <label class="input-value-style" for="input-style-nav-opacity"
                     style="background: #111">
              </label>
              <input type="range" id="input-style-nav-opacity"
                     data-config-key="style.nav-opacity"
                     data-style="opacity"
                     style="width: 10rem;"
                     min="0" max="1" step="0.05" />
            </span>
          </p>
          <p class="control">
            <label for="input-style-dropdown-bg"
                   data-locale="ui.config.style.element.dropdown">
              드롭다운
            </label>
            <span class="input-group">
              <label class="input-value-style" for="input-style-dropdown-bg">
              </label>
              <input type="text" id="input-style-dropdown-bg"
                     data-config-key="style.dropdown-bg"
                     data-style="background"
                     style="width: 10rem" />
            </span>
          </p>
          <p class="control">
            <label for="input-style-header-bg"
                   data-locale="ui.config.style.element.header">
              표 헤더
            </label>
            <span class="input-group">
              <label class="input-value-style" for="input-style-header-bg">
              </label>
              <input type="text" id="input-style-header-bg"
                     data-config-key="style.header-bg"
                     data-style="background"
                     style="width: 10rem" />
            </span>
          </p>
          <blockquote data-locale="ui.config.style.width-applied-only">
            24인 모드가 설정되어 있을 때만 적용됩니다.
          </blockquote>
          <p class="control">
            <label for="input-style-cell-bg"
                   data-locale="ui.config.style.element.cell">
              항목
            </label>
            <span class="input-group">
              <label class="input-value-style" for="input-style-cell-bg">
              </label>
              <input type="text" id="input-style-cell-bg"
                     data-config-key="style.cell-bg"
                     data-style="background"
                     style="width: 10rem" />
            </span>
          </p>
        </article>
        <article>
          <h3 data-locale="ui.config.style.foreground"> 글자 색 </h3>
          <p class="control">
            <label for="input-style-nav-fg"
                   data-locale="ui.config.style.element.nav">
              상단 바
            </label>
            <span class="input-group">
              <label class="input-value-style" for="input-style-nav-fg">
              </label>
              <input type="text" id="input-style-nav-fg"
                     data-config-key="style.nav-fg"
                     data-style="backgroundColor"
                     style="width: 10rem" />
            </span>
          </p>
          <p class="control">
            <label for="input-style-dropdown-fg"
                   data-locale="ui.config.style.element.dropdown">
              드롭다운
            </label>
            <span class="input-group">
              <label class="input-value-style" for="input-style-dropdown-fg">
              </label>
              <input type="text" id="input-style-dropdown-fg"
                     data-config-key="style.dropdown-fg"
                     data-style="background"
                     style="width: 10rem" />
            </span>
          </p>
          <p class="control">
            <label for="input-style-my-row-fg"
                   data-locale="ui.config.style.element.my-row">
              내 데이터
            </label>
            <span class="input-group">
              <label class="input-value-style" for="input-style-my-row-fg">
              </label>
              <input type="text" id="input-style-my-row-fg"
                     data-config-key="style.my-row-fg"
                     data-style="background"
                     style="width: 10rem" />
            </span>
          </p>
          <p class="control">
            <label for="input-style-content-fg"
                   data-locale="ui.config.style.element.table">
              표
            </label>
            <span class="input-group">
              <label class="input-value-style" for="input-style-content-fg">
              </label>
              <input type="text" id="input-style-content-fg"
                     data-config-key="style.content-fg"
                     data-style="backgroundColor"
                     style="width: 10rem" />
            </span>
          </p>
          <p class="control">
            <label for="input-style-accent-color"
                   data-locale="config.style.accent-color">
              강조
            </label>
            <span class="input-group">
              <label class="input-value-style" for="input-style-accent-color">
              </label>
              <input type="text" id="input-style-accent-color"
                     data-config-key="style.color-accent"
                     data-style="backgroundColor"
                     style="width: 10rem" />
            </span>
          </p>
        </article>
        <article>
          <h3 data-locale="ui.config.style.shadow">
            그림자
          </h3>
          <p class="control">
            <label for="input-style-shadow-card"
                   data-locale="config.style.shadow-card"> 오버레이 창 </label>
            <span class="input-group">
              <label class="input-value-style" for="input-style-shadow-card">
              </label>
              <input type="text" id="input-style-shadow-card"
                     data-config-key="style.shadow-card"
                     data-style="boxShadow"
                     style="width: 10rem" />
            </span>
          </p>
          <p class="control">
            <label for="input-style-shadow-text"
                   data-locale="config.style.shadow-text"> 텍스트 </label>
            <span class="input-group">
              <label class="input-value-style" for="input-style-shadow-text"
                     style="color: white; width: 2rem; background: #7986cb">
                1a%
              </label>
              <input type="text" id="input-style-shadow-text"
                     data-config-key="style.shadow-text"
                     data-style="textShadow"
                     style="width: 10rem" />
            </span>
          </p>
        </article>
      </section>
      <section data-page="color">
        <article>
          <p class="control">
            <label for="button-reset-color"
                   data-locale="ui.config.color.reset-this">
              색상 초기화
            </label>
            <button id="button-reset-color" data-reset="color"
                    data-locale="ui.config.execute">
              실행
            </button>
          </p>
          <p class="control">
            <label for="input-color-gauge-opacity"
                   data-locale="config.color.gauge-opacity">
              투명도
            </label>
            <span class="input-group">
              <label class="input-value-style" for="input-color-gauge-opacity"
                     style="background: #444;">
              </label>
              <input type="range" id="input-color-gauge-opacity"
                     data-config-key="color.gauge-opacity"
                     data-style="opacity"
                     style="width: 10rem"
                     min="0" step="0.05" max="1" />
            </span>
          </p>
        </article>
        <article>
          <h3 data-locale="ui.config.color.position">
            역할 표시
          </h3>
          <blockquote data-locale="ui.config.color.position-none">
            없애려면 none으로 설정하세요.
          </blockquote>
          <p class="control">
            <label for="input-color-position-tank"
                   data-locale="config.color.position-tank">
              방어 역할
            </label>
            <span class="input-group">
              <label class="input-value-style" for="input-color-position-tank">
              </label>
              <input type="text" id="input-color-position-tank"
                     style="width: 10rem"
                     data-config-key="color.position-tank"
                     data-style="background" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-position-deal"
                   data-locale="config.color.position-deal">
              공격 역할
            </label>
            <span class="input-group">
              <label class="input-value-style" for="input-color-position-deal">
              </label>
              <input type="text" id="input-color-position-deal"
                     style="width: 10rem"
                     data-config-key="color.position-deal"
                     data-style="background" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-position-heal"
                   data-locale="config.color.position-heal">
              회복 역할
            </label>
            <span class="input-group">
              <label class="input-value-style"
                     for="input-color-position-heal">
              </label>
              <input type="text" id="input-color-position-heal"
                     style="width: 10rem"
                     data-config-key="color.position-heal"
                     data-style="background" />
            </span>
          </p>
        </article>
        <article>
          <h3 data-locale="config.color.position-tank">
            방어 역할
          </h3>
          <p class="control">
            <label for="input-color-pld" data-locale="config.color.pld">
              나이트 <span class="text-muted">(검술사)</span>
            </label>
            <span class="input-group">
              <label class="input-value-style job class-pld" for="input-color-pld">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-pld" style="width: 10rem"
                     data-config-key="color.pld"
                     data-style="background" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-war" data-locale="config.color.war">
              전사 <span class="text-muted">(도끼술사)</span>
            </label>
            <span class="input-group">
              <label class="input-value-style job class-war" for="input-color-war">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-war" style="width: 10rem"
                     data-config-key="color.war"
                     data-style="background" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-drk" data-locale="config.color.drk">
              암흑기사
            </label>
            <span class="input-group">
              <label class="input-value-style job class-drk" for="input-color-drk">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-drk" style="width: 10rem"
                     data-config-key="color.drk"
                     data-style="background" />
            </span>
          </p>
        </article>
        <article>
          <h3 data-locale="config.color.position-deal">
            공격 역할
          </h3>
          <p class="control">
            <label for="input-color-mnk" data-locale="config.color.mnk">
              몽크 <span class="text-muted">(격투사)</span>
            </label>
            <span class="input-group">
              <label class="input-value-style job class-mnk" for="input-color-mnk">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-mnk" style="width: 10rem"
                     data-config-key="color.mnk"
                     data-style="background" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-drg" data-locale="config.color.drg">
              용기사 <span class="text-muted">(창술사)</span>
            </label>
            <span class="input-group">
              <label class="input-value-style job class-drg" for="input-color-drg">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-drg" style="width: 10rem"
                     data-config-key="color.drg"
                     data-style="background" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-brd" data-locale="config.color.brd">
              음유시인 <span class="text-muted">(궁술사)</span>
            </label>
            <span class="input-group">
              <label class="input-value-style job class-brd" for="input-color-brd">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-brd" style="width: 10rem"
                     data-config-key="color.brd"
                     data-style="background" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-nin" data-locale="config.color.nin">
              닌자 <span class="text-muted">(쌍검사)</span>
            </label>
            <span class="input-group">
              <label class="input-value-style job class-nin" for="input-color-nin">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-nin" style="width: 10rem"
                     data-config-key="color.nin"
                     data-style="background" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-smn" data-locale="config.color.smn">
              소환사 <span class="text-muted">(비술사)</span>
            </label>
            <span class="input-group">
              <label class="input-value-style job class-smn" for="input-color-smn">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-smn" style="width: 10rem"
                     data-config-key="color.smn"
                     data-style="background" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-blm" data-locale="config.color.blm">
              흑마도사 <span class="text-muted">(주술사)</span>
            </label>
            <span class="input-group">
              <label class="input-value-style job class-blm" for="input-color-blm">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-blm" style="width: 10rem"
                     data-config-key="color.blm"
                     data-style="background" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-mch" data-locale="config.color.mch">
              기공사
            </label>
            <span class="input-group">
              <label class="input-value-style job class-mch" for="input-color-mch">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-mch" style="width: 10rem"
                     data-config-key="color.mch"
                     data-style="background" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-smn" data-locale="config.color.sam">
              사무라이
            </label>
            <span class="input-group">
              <label class="input-value-style job class-sam" for="input-color-sam">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-sam" style="width: 10rem"
                     data-config-key="color.sam"
                     data-style="background" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-smn" data-locale="config.color.rdm">
              적마도사
            </label>
            <span class="input-group">
              <label class="input-value-style job class-rdm" for="input-color-rdm">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-rdm" style="width: 10rem"
                     data-config-key="color.rdm"
                     data-style="background" />
            </span>
          </p>
		  <p class="control">
            <label for="input-color-blu" data-locale="config.color.blu">
              青魔
            </label>
            <span class="input-group">
              <label class="input-value-style job class-blu" for="input-color-blu">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-blu" style="width: 10rem"
                     data-config-key="color.blu"
                     data-style="background" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-rpr" data-locale="config.color.rpr">
              镰刀哥 
            </label>
            <span class="input-group">
              <label class="input-value-style job class-rpr" for="input-color-rpr">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-rpr" style="width: 10rem"
                     data-config-key="color.rpr"
                     data-style="background" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-vpr" data-locale="config.color.vpr">
              蝰蛇剑士
            </label>
            <span class="input-group">
              <label class="input-value-style job class-vpr" for="input-color-vpr">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-vpr" style="width: 10rem"
                     data-config-key="color.vpr"
                     data-style="background" />
            </span>
          </p>
		  <p class="control">
            <label for="input-color-pct" data-locale="config.color.pct">
              绘灵法师
            </label>
            <span class="input-group">
              <label class="input-value-style job class-pct" for="input-color-pct">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-pct" style="width: 10rem"
                     data-config-key="color.pct"
                     data-style="background" />
            </span>
          </p>
        </article>
        <article>
          <h3 data-locale="config.color.position-heal">
            회복 역할
          </h3>
          <p class="control">
            <label for="input-color-whm" data-locale="config.color.whm">
              백마도사 <span class="text-muted">(환술사)</span>
            </label>
            <span class="input-group">
              <label class="input-value-style job class-whm" for="input-color-whm">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-whm" style="width: 10rem"
                     data-config-key="color.whm"
                     data-style="background" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-sch" data-locale="config.color.sch">
              학자
            </label>
            <span class="input-group">
              <label class="input-value-style job class-sch" for="input-color-sch">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-sch" style="width: 10rem"
                     data-config-key="color.sch"
                     data-style="background" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-sge" data-locale="config.color.sge">
              贤者
            </label>
            <span class="input-group">
              <label class="input-value-style job class-sge" for="input-color-sge">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-sge" style="width: 10rem"
                     data-config-key="color.sge"
                     data-style="background" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-ast" data-locale="config.color.ast">
              점성술사
            </label>
            <span class="input-group">
              <label class="input-value-style job class-ast" for="input-color-ast">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-ast" style="width: 10rem"
                     data-config-key="color.ast"
                     data-style="background" />
            </span>
          </p>
        </article>
        <article>
          <h3 data-locale="ui.config.color.pet-buddy">
            소환수/버디
          </h3>
          <p class="control">
            <label for="input-color-smn-pet"
                   data-locale="config.color.smn-pet">
              소환사 <span class="text-muted">(비술사)</span>
            </label>
            <span class="input-group">
              <label class="input-value-style job class-garuda" for="input-color-smn-pet">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-smn-pet" style="width: 10rem"
                     data-config-key="color.smn-pet"
                     data-style="background" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-sch-pet"
                   data-locale="config.color.sch-pet">
              학자
            </label>
            <span class="input-group">
              <label class="input-value-style job class-selene" for="input-color-sch-pet">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-sch-pet" style="width: 10rem"
                     data-config-key="color.sch-pet"
                     data-style="background" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-mch-pet"
                   data-locale="config.color.mch-pet">
              기공사
            </label>
            <span class="input-group">
              <label class="input-value-style job class-bishop" for="input-color-mch-pet">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-mch-pet" style="width: 10rem"
                     data-config-key="color.mch-pet"
                     data-style="background" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-chocobo"
                   data-locale="config.color.chocobo">
              초코보
            </label>
            <span class="input-group">
              <label class="input-value-style job class-chocobo" for="input-color-chocobo">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-chocobo" style="width: 10rem"
                     data-config-key="color.chocobo"
                     data-style="background" />
            </span>
          </p>
        </article>
        <article>
          <h3 data-locale="ui.config.color.etc">
            기타
          </h3>
          <p class="control">
            <label for="input-color-gauge-default"
                   data-locale="config.color.gauge-default">
              기본 색상
            </label>
            <span class="input-group">
              <label class="input-value-style job" for="input-color-gauge-default">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-gauge-default"
                     data-config-key="color.gauge-default"
                     data-style="background"
                     style="width: 10rem" />
            </span>
          </p>
          <p class="control">
            <label for="input-color-limit-break"
                   data-locale="config.color.limit-break">
              리밋 브레이크
            </label>
            <span class="input-group">
              <label class="input-value-style job class-limit-break"
                     for="input-color-limit-break">
                <span class="flex-column-i-icon"></span>
              </label>
              <input type="text" id="input-color-limit-break"
                     data-config-key="color.limit-break"
                     data-style="background"
                     style="width: 10rem" />
            </span>
          </p>
        </h3>
      </section>
      <section data-page="width">
        <article>
          <blockquote data-locale="ui.config.width.css-help.0">
            16px 단위이며, 크기 조절에 따라 달라집니다.
          </blockquote>
          <blockquote data-locale="ui.config.width.css-help.1">
            '이름' 칸은 창 너비가 줄어들 때 제일 먼저 줄어듭니다.
          </blockquote>
          <p class="control">
            <label for="button-reset-all"
                   data-locale="ui.config.width.reset-this">
              너비 초기화
            </label>
            <button id="button-reset-all"
                    data-reset="colwidth"
                    data-locale="ui.config.execute">
              실행
            </button>
          </p>
        </article>
      </section>
      <section data-page="tab" class="tabbed-section">
        <ul class="tab" id="tab-container">
          <li class="tab-button" id="tab-new">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                 viewBox="0 0 24 24" class="icon">
              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
            </svg>
          </li>
          <li class="tab-button" data-reset="tabs">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                 viewBox="0 0 24 24" class="icon">
              <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
            </svg>
          </li>
        </ul>
        <div class="tabconfig-pane-container" id="tabconfig-pane-container">
        </div>
      </section>
      <section data-page="import-export" class="tabbed-section">
        <ul class="tab tab-switcher text-center"
            data-target="section[data-page=import-export] > div">
          <li data-pane="import" class="active"
              data-locale="ui.config.i/e.import">
            들여오기
          </li>
          <li data-pane="export"
              data-locale="ui.config.i/e.export">
            내보내기
          </li>
        </ul>
        <div class="tabconfig-pane-container">
          <div class="tabconfig-pane active" data-pane="import">
            <article>
              <p class="text-center">
                <span data-locale="ui.config.i/e.paste-here">
                  아래에 가져온 값을 붙여넣으세요:
                </span>
                <br />
                <input type="text" id="import-text" class="text-center" />
              </p>
              <p class="control text-right">
                <button id="import-button"
                        data-locale="ui.config.i/e.import">
                  가져오기
                </button>
              </p>
            </article>
            <div class="tabconfig-content text-center" id="import-data"
                 style="height: calc(100% - 9.375rem);">
            </div>
          </div>
          <div class="tabconfig-pane" data-pane="export">
            <article>
              <blockquote>
                <b data-locale="ui.config.i/e.save-first">
                  먼저 저장해야 합니다!
                </b>
              </blockquote>
              <blockquote data-locale="ui.config.i/e.export-help">
                '일반 > 레이아웃'의 값은 '스타일'에 포함되고,
                몇몇 값은 제외됩니다.
                <br />
                기본값과 다른 값은 내보내지지 않습니다.
              </blockquote>
              <p class="control">
                <label for="export-column"
                       data-locale="ui.config.i/e.config-to-export">
                  내보낼 설정
                </label>
                <select id="export-column">
                  <option value="style"
                          data-locale="ui.config.style._">
                    스타일
                  </option>
                  <option value="color"
                          data-locale="ui.config.color._">
                    게이지 색상
                  </option>
                  <option value="colwidth"
                          data-locale="ui.config.width._">
                    너비
                  </option>
                  <option value="tabs"
                          data-locale="ui.config.tab._">
                    탭
                  </option>
                  <option value="style,color,colwidth,tabs" selected
                          data-locale="ui.config.i/e.all">
                    전부
                  </option>
                </select>
              </p>
              <p class="control text-right">
                <button id="export-confirm"
                        data-locale="ui.config.i/e.export">
                  내보내기
                </button>
              </p>
            </article>
            <div class="tabconfig-content text-center"
                 style="height: calc(100% - 12.375rem);">
              <p data-locale="ui.config.i/e.copy-this">
                아래의 값을 전부 복사하세요:
              </p>
              <p>
                <input type="text" id="export-text" class="text-center" />
              </p>
            </div>
          </div>
        </div>
      </section>
      <section data-page="etc" class="tabbed-section">
        <ul class="tab tab-switcher text-center"
            data-target="section[data-page=etc] > div">
          <li data-pane="filter" class="active"
              data-locale="ui.config.etc.others._">
            기타
          </li>
          <li data-pane="css"
              data-locale="ui.config.etc.css">
            CSS
          </li>
        </ul>
        <div class="tabconfig-pane-container tabconfig-noshadow">
          <div class="tabconfig-pane active" data-pane="filter">
            <article>
              <blockquote data-locale="ui.config.etc.others.skill-aliases-help">
                'The Forbidden Chakra'와 같은 긴 스킬 이름에 대해 약칭을 사용합니다.
              </blockquote>
              <p class="control">
                <label for="input-format-use_skill_aliases"
                       data-locale="config.format.use_skill_aliases">
                  스킬 별명 표시 (글로벌 서버용)
                </label>
                <input type="checkbox" id="input-format-use_skill_aliases"
                       data-type="boolean"
                       data-config-key="format.use_skill_aliases" />
              </p>
            <article>
              <h3 data-locale="ui.config.etc.others.filter"> 필터 </h3>
              <blockquote data-locale="ui.config.etc.others.filter-help.0">
                FFXIV_Plugin이 피아식별조차 제대로 못 하는 관계로, 어떻게든
                적을 표시하지 않도록 시도합니다.
              </blockquote>
              <blockquote data-locale="ui.config.etc.others.filter-help.1">
                뭔가 이상하다면, 아래의 모든 옵션을 꺼 보세요.
              </blockquote>
              <p class="control">
                <label for="input-filter-unusual_spaces"
                       data-locale="ui.config.etc.others.unusual-spaces">
                  소환수도 아닌데 이름에 띄어쓰기가 있음
                </label>
                <input type="checkbox" id="input-filter-unusual_spaces"
                       data-type="boolean"
                       data-config-key="filter.unusual_spaces" />
              </p>
              <p class="control">
                <label for="input-filter-jobless"
                       data-locale="ui.config.etc.others.jobless">
                  클래스/잡이 비어있음
                </label>
                <input type="checkbox" id="input-filter-jobless"
                       data-type="boolean"
                       data-config-key="filter.jobless" />
              </p>
              <p class="control">
                <label for="input-filter-non_combatant"
                       data-locale="ui.config.etc.others.not-combatant">
                  전투직이 아님
                </label>
                <input type="checkbox" id="input-filter-non_combatant"
                       data-type="boolean"
                       data-config-key="filter.non_combatant" />
              </p>
            </article>
          </div>
          <div class="tabconfig-pane active" data-pane="css">
            <div id="editor">...</div>
          </div>
        </div>
      </section>
      <section data-page="info">
        <svg xmlns="http://www.w3.org/2000/svg" width="416" height="128"
             viewBox="0 0 416 128" class="clock">
          <g>
            <circle fill="rgba(255, 255, 255, 0.25)" cx="64" cy="64" r="64"/>
            <line stroke="#000" stroke-width="6" x1="64" y1="64" x2="74.4" y2="25.4"/>
            <line stroke="#000" stroke-width="2" x1="64" y1="112" x2="64" y2="64"/>
          </g>
          <g>
            <circle fill="#fff" cx="208" cy="64" r="64"/>
            <line stroke="#000" stroke-width="6" x1="208" y1="64" x2="218.4" y2="25.4"/>
            <line stroke="#000" stroke-width="2" x1="208" y1="112" x2="208" y2="64"/>
          </g>
          <g>
            <circle fill="rgba(255, 31, 31, 0.25)" cx="352" cy="64" r="64"/>
            <line stroke="#000" stroke-width="6" x1="352" y1="64" x2="362.4" y2="25.4"/>
            <line stroke="#000" stroke-width="2" x1="352" y1="112" x2="352" y2="64"/>
          </g>
        </svg>
        <article>
          <h3 id="kagerou">
            project<mark>kagerou</mark>
          </h3>
          <p>
            version <span class="version"> ... </span>
            '<span class="codename">Unknown Release</span>'
          </p>
          <p>
            copyright © 2016-2017 kuriyama hibiya
          </p>
        </article>
        <article>
          <h3 data-locale="ui.config.info.created-by"> 만든 사람 </h3>
          <p>
            <span class="text-muted" data-locale="ui.config.info.servers">
              <del>오딘</del> 초코보 / Tonberry
            </span>
            <span data-locale="ui.config.info.hibiya">
              히비야
            </span>
          </p>
        </article>
        <article>
          <h3 data-locale="ui.config.info.support">
            지원 / 문제 해결
          </h3>
          <p> @hibiyasleep </p>
          <p> u/hibiya_ </p>
          <p> https://github.com/hibiyasleep/kagerou </p>
        </article>
        <article>
          <h3 data-locale="ui.config.info.license">
            라이센스
          </h3>
          <p>
            This program is distributed under
            <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html"
               style="color: inherit;">
              GNU Public License Version 3</a>.
          </p>
          <pre>
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see &lt;http://www.gnu.org/licenses/&gt;.
          </pre>
          <p data-locale="ui.config.info.icon-files">
            share/img/class 안의 모든 파일에 대하여,
          </p>
          <pre>
© 2010 - 2016 SQUARE ENIX Co., Ltd. All Rights Reserved.
          </pre>
          <p>
            Sortable.js
          </p>
          <pre>
Copyright 2013-2016 Lebedev Konstantin ibnRubaXa@gmail.com
http://rubaxa.github.io/Sortable/

MIT License
          </pre>
        </article>
        <article>
          <h3 data-locale="ui.config.info.privacy._">
            개인정보
          </h3>
          <p data-locale="ui.config.info.privacy.list.0">
            이 프로그램이 작동하는 중 문제가 발생할 시, 문제 해결을 위한 정보가
            <br />
            서버로 전송될 수 있습니다.
          </p>
          <p data-locale="ui.config.info.privacy.list.1">
            수집되는 정보는 문제를 식별하기 위한 최소한의 정보로 제한됩니다:
          </p>
          <p data-locale="ui.config.info.privacy.list.2">
            * 프로그램 버전
            <br />
            * 마지막 전투 데이터
            <br />
            * ravenjs가 수집하는 기타 정보
          </p>
        </article>
        <article>
          <h3> Special Thanks </h3>
          <p> @leiameimi </p>
          <p> @spr0tsuki @mlrlnc - C# </p>
          <p> @nitricacid1 </p>
          <p> /u/tollekarte666 (Deutsch translation) </p>
          <p> veltall (Installation Guide) </p>
          <p> Jmikeydarby (EN translation improvements) </p>
          <p> Andrycism (中文翻译) </p>
          <p> @ykzts (日本語編訳) </p>
          <p> <br /> </p>
          <p> <br /> </p>
          <p> and YOU </p>
        </article>
      </section>
    </main>
  </body>
</html>
